<template>
    <div class="console">
        <div ref="chartRef" style="width: 1500px; height: 500px;"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { getFide } from '@/api/dataInfo/flightInfo';

const chartRef = ref<HTMLElement | null>(null);
const flightData = ref<Array<Record<string, number>>>([]);

onMounted(async () => {
try {
    // 发送异步请求获取数据
    const response = await getFide();
    console.log(response);
    flightData.value = response.data;

    // 初始化 echarts 图表
    const chart = echarts.init(chartRef.value as HTMLDivElement);

    const option = {
        title: {
            text: '进港和出港航班数量'
        },
        tooltip: {},
        legend: {
            data: ['进港', '出港']
        },
        xAxis: {
            data: Object.keys(flightData.value[0])
        },
        yAxis: {},
        series: [
            {
            name: '进港',
            type: 'bar',
            data: Object.values(flightData.value[0])
            },
            {
            name: '出港',
            type: 'bar',
            data: Object.values(flightData.value[1])
            }
        ]
    };

    chart.setOption(option);
} catch (error) {
    console.error('Error fetching data:', error);
}
});
</script>
